<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/nav.css">
    <script src="D:\Mao\test2301\作业\作业-下发学生\js\jquery-3.6.0.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul style="display:none">
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="#">留言板</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">电话</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">邮箱</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        // //获取元素
        // var nav = document.querySelector('.nav');
        // var lis = nav.childNodes; //得到4个li

        // for (var i = 0; i < lis.length; i++) {
        //     //鼠标经过显示
        //     lis[i].onmouseover = function() {
        //             this.children[1].style.display = 'block';
        //         }
        //         //鼠标离开
        //     lis[i].onmouseout = function() {
        //         this.children[1].style.display = 'none';
        //     }
        // }

        $(function() {
            //鼠标经过
            $(".nav>li").mouseover(function() {
                //show()显示元素
                $(this).children("ul").show();
            });
            //鼠标离开
            $(".nav>li").mouseout(function() {
                //hide()隐藏元素
                $(this).children("ul").hide();
            })
        })
    </script>
</body>

</html>